const { message } = antd; // 第三方库用于消息提示
window.onload = async () => {
    const env = {
        serviceUrl: "https://vjmap.com/server/api/v1",
        accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjo0ODEzMjY3NjM3LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTY1OTY2NjYzN30.cDXCH2ElTzU2sQU36SNHWoTYTAc4wEkVIXmBAIzWh6M",
        exampleMapId: "sys_zp",
        assetsPath: "../../assets/",
        ...__env__ // 如果您已私有化部署，需要连接已部署的服务器地址和token，请打开js/env.js,修改里面的参数
    };
    try {
        // 在线效果查看地址: https://vjmap.com/demo/#/demo/map/service/29modifyselectentity
        // --选择实体修改实体颜色增加效果--
        // 地图服务对象
        let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
        // 打开地图
        let res = await svc.openMap({
            mapid: "sacc698bb198b6", // 地图ID
            mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
            style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
        })
        if (res.error) {
            // 如果打开出错
            message.error(res.error)
        }
        // 获取地图范围
        let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
        // 根据地图范围建立几何投影坐标系
        let prj = new vjmap.GeoProjection(mapExtent);
        
        // let style = svc.vectorStyle(); // 默认的样式
        let customColorCaseExpr = [
            ['==', ['feature-state', 'status'], 'red'], '#ff0000',
            ['==', ['feature-state', 'status'], 'green'], '#00ff00',
            ['==', ['feature-state', 'status'], 'blue'], '#0000ff',
        ];
        // 自定义的矢量样式
        let style = svc.vectorStyle({
            hoverColor: 'rgba(19,255,247,1)', // 自定义高亮时颜色
            hoverOpacity: 1, // 自定义 高亮时透明度
            hoverLineWidth: 5, // 自定义 高亮时线宽
            customColorCaseExpr
        })
        
        // 地图对象
        let map = new vjmap.Map({
            container: 'map', // DIV容器ID
            style: style, // 样式，这里是栅格样式
            center: prj.toLngLat(mapExtent.center()), // 设置地图中心点
            zoom: 3, // 设置地图缩放级别
            renderWorldCopies: false // 不显示多屏地图
        });
        
        // 关联服务对象和投影对象
        map.attach(svc, prj);
        // 根据地图本身范围缩放地图至全图显示
        // map.fitMapBounds();
        
        let mapBounds = map.getGeoBounds();
        await map.onLoad();
        
        // *** 实际项目中css样式直接写css文件中，不要通过代码来增加
        let cssCode = `
                @keyframes rotate {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }
                 .myImage {
                    width: 200px;
                    height: 200px;
                    animation: rotate 5s infinite linear;
                    positon: 'absolute';
                    left: '0px';
                    top: '0px';
                    opacity: 1;
                    zIndex: 2;
                    pointerEvents: "none"
                }
                `
        let styleElement = document.createElement('style');
        styleElement.appendChild(document.createTextNode(cssCode));
        // 将新创建的 <style> 元素添加到 <head> 中
        document.head.appendChild(styleElement);
        
        // 有高亮状态（鼠标在地图元素上时，会高亮)
        map.enableVectorLayerHoverHighlight((event, feature, layer) => {
            // 点击高亮实体回调事件
            // const prop = feature.properties;
            // let content = `event: ${event}; feature: ${feature.id}; layer: ${layers[prop.layer].name}; type: ${entTypeIdMap[prop.type]}`
        })
        
        const imageWidth = 200; // 图像宽
        const imageHeight = 200; // 图像高
        const image = document.createElement("img");
        image.className = "myImage"
        image.src = ""
        const divDom = document.createElement('div');
        divDom.appendChild(image)
        
        const changeFeatureStatus = (ids, state) => {
            if (!ids) return;
            if (!Array.isArray(ids)) ids = [ids]
            let sourceLayers = ['polygons', 'lines', 'points'];
            // vector source下面的所有图层
            for (let sourceLayer of sourceLayers) {
                // 块下面的所有feature id
                for (let id of ids) {
                    map.setFeatureState({
                            source: "vector-source",
                            sourceLayer: sourceLayer,
                            id: id
                        },
                        state)
                }
            }
        }
        
        let curFeatureId;
        let curDivOverlay;
        
        const addDivOverlay = (bounds) => {
            if (curDivOverlay) {
                curDivOverlay.remove();
                curDivOverlay = null;
            }
            curDivOverlay = new vjmap.DivOverlay({
                bounds: vjmap.GeoBounds.fromString(bounds), // 四个点的位置
                element: divDom, // DIV 元素
                width: imageWidth,// DIV 宽
                height: imageHeight,// DIV 高
                maxZoom: 7
            })
            curDivOverlay.addTo(map);
        }
        map.enableLayerClickHighlight(svc, e => {
            if (!e) return;
            // 点击在圆上时增加一个动画图片
            if (e.name == "AcDbHatch") {
                // 如果是点击在圆上面
                // 增加一个DIV的Image覆盖物
                addDivOverlay(e.bounds)
            }
        
            // 把实体的颜色进行修改，改成红色
            if (curFeatureId) {
                // 先取消原来修改的颜色
                changeFeatureStatus(curFeatureId, {status: ""})
            }
            curFeatureId = `${e.id}`
            // 改成新的颜色
            changeFeatureStatus(curFeatureId, {status: "red"})
        
        }, "#0000", undefined, undefined, (curLngLat) => {
            // 查询前回调函数，默认点击查询误差是5个像素，这里改成1个像素误差，提高精度
            return {
                pixelsize: 1
            }
        })
        
        let initImageBounds = '[1882.28697585,1907.56398938,1902.28536452,1927.56318371]'
        addDivOverlay(initImageBounds);
        map.setCenter(map.toLngLat(vjmap.GeoBounds.fromString(initImageBounds).center()));
        
    }
    catch (e) {
        console.error(e);
        message.error({
            content: "catch error: " + (e.message || e.response || JSON.stringify(e).substr(0, 80)),
            duration: 60,
            key: "err"
        });
    }
};